<template>
	<view class="search" :style="type==1?'background: #FFFFFF;':''">
		<view class="post">
			<view class="flex">
				<view style="width:50%;text-align: center;" @click="qiehuan(2)">
					<view :style="type==2?'font-size: 30rpx;font-weight: bold;':''">收藏的师傅</view>
					<view v-if="type==2" class="xian"></view>
				</view>
				<view style="width:50%;text-align: center;" @click="qiehuan(1)">
					<view :style="type==1?'font-size: 30rpx;font-weight: bold;':''">拉黑的师傅</view>
					<view v-if="type==1" class="xian"></view>
				</view>
			</view>
		</view>
		<view style="background: #FFFFFF;border-radius: 16rpx;margin:0 20rpx 16rpx;padding:20rpx;"
			v-for="(item,index) in list" :key="index">
			<view class="flexJusp">
				<view class="flex" style="margin-bottom:16rpx;" @click="detail(item)">
					<image style="width: 96rpx;height: 96rpx;border-radius:50%;" :src="item.icon"></image>
					<view style="margin-left:16rpx;">
						<view style="font-size: 30rpx;font-weight: bold;">{{item.name}}</view>
						<view style="font-size: 32rpx;font-weight: bold;color: #F25816;">{{item.allpoints }}<text
								style="font-size:22rpx;">分</text></view>
					</view>
				</view>
				<view v-if="type==2" @click="caozuo(item,2)"
					style="width: 144rpx;height: 50rpx;border-radius: 26rpx;border: 2rpx solid #666666;font-size: 24rpx;color: #666666;line-height:50rpx;text-align: center;margin:24rpx 4rpx 0 0;">
					取消收藏</view>
				<view v-if="type==1" @click="caozuo(item,1)"
					style="width: 144rpx;height: 50rpx;border-radius: 26rpx;border: 2rpx solid #666666;font-size: 24rpx;color: #666666;line-height:50rpx;text-align: center;margin:24rpx 4rpx 0 0;">
					取消拉黑</view>
			</view>
			<view @click="detail(item)" class="flex" style="background: #F6F6F6;border-radius: 16rpx;font-size:24rpx;padding:16rpx 24rpx;">
				<view style="font-size:26rpx;width:380rpx;">累计完工<text style="color: #1176EF;"><text style="font-size:30rpx;">{{item.okorder}}</text> 单</text> </view>
				<view style="font-size:26rpx;">师傅距离<text style="color: #1176EF;"><text style="font-size:30rpx;">{{item.space}}</text> 公里</text> </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 2,
				input: '',
				list: [],
				longitude:'',
				latitude:''
			};
		},
		onShow() {
			var that = this
			uni.getLocation({
			    type: 'wgs84', //返回可以用于uni.openLocation的经纬度
			    success:(res)=>{
					that.longitude = res.longitude
					that.latitude = res.latitude
					this.loads()
			    }
			});
			
		},
		methods: {
			loads(){
				this.$httpapi('myshifu', 'POST',{flag:this.type,latitude:this.latitude,longitude:this.longitude}).then(res => {
					this.list = res.data
				})
			},
			caozuo(item,type) {
				this.$httpapi('caozuo', 'POST',{userid:item.userid,flag:type}).then(res => {
					this.loads()
				})
			},
			detail(item){
				uni.navigateTo({
					url:'/pages/index/MasterDetails/MasterDetails?id='+item.userid
				})
			},
			qiehuan(type) {
				this.type = type
				this.loads()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.search {
		padding: 80rpx 0 0;

		.post {
			position: fixed;
			top: 0rpx;
			left: 0;
			width: 750rpx;
			height: 60rpx;
			background: #FFFFFF;
		}

		.xian {
			width: 170rpx;
			height: 6rpx;
			background: #2089FF;
			border-radius: 4rpx;
			margin: 8rpx auto 0;
		}
	}
</style>